<template>
  <div class="app-container">
    <!-- 搜索/过滤区域 -->
    <div class="search-container">
      <el-form :inline="true" size="small" class="search-form">
        <el-form-item label="">
          <el-checkbox-group v-model="drugType">
            <el-checkbox label="中药饮片"></el-checkbox>
            <el-checkbox label="中药颗粒"></el-checkbox>
            <el-checkbox label="西药"></el-checkbox>
            <el-checkbox label="中成药"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="" style="margin-left: 60px;margin-right: 60px;">
          <el-checkbox-group v-model="routeType">
            <el-checkbox label="口服"></el-checkbox>
            <el-checkbox label="静脉"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox-group v-model="drugBaseType">
            <el-checkbox label="抗菌药物"></el-checkbox>
            <el-checkbox label="肿瘤药物"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" v-loading="loading" @row-click="setDrugFlag" style="width: 100%; margin-bottom: 20px;"
      border stripe>
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column prop="name" label="医嘱内容" />
      <el-table-column prop="spec" label="规格" width="80" />
      <el-table-column prop="route" label="给药途径" width="80" />
      <el-table-column prop="dose" label="单次用量" width="80" />
      <el-table-column prop="freq" label="频次" width="80" />
      <el-table-column prop="amount" label="数量" width="80" />
      <el-table-column prop="doctor" label="开嘱医生" width="120" />
      <el-table-column prop="startTime" label="开方时间" width="220" />
      <el-table-column prop="remark" label="用药备注" width="180" />
      <el-table-column prop="conclusion" label="审方结论" />
      <el-table-column prop="reason" label="开嘱理由" width="180" />
    </el-table>

    <div style="text-align: right;">
      <el-row>
        <el-button type="primary">审方合格</el-button>
        <el-button type="info">清空审方结论</el-button>
        <el-button type="success">下一例</el-button>
      </el-row>
    </div>


    <el-dialog title="实时审方" :visible.sync="prescdialogVisible" :before-close="handleDialogClose">
      <div>
        <div class="educate-item">
          <el-table :data="orderItem"  v-loading="loading" style="width: 100%; margin-bottom: 20px;" border stripe>
            <el-table-column prop="name" label="医嘱内容" />
            <el-table-column prop="spec" label="规格" width="80" />
            <el-table-column prop="route" label="给药途径" width="80" />
            <el-table-column prop="dose" label="单次用量" width="80" />
            <el-table-column prop="freq" label="频次" width="80" />
            <el-table-column prop="amount" label="数量" width="60" />
            <el-table-column prop="doctor" label="开嘱医生" width="80" />
            <el-table-column prop="startTime" label="开方时间" width="120" />
            <el-table-column prop="remark" label="用药备注" width="140" />
            <el-table-column prop="reason" label="开嘱理由" width="140" />
          </el-table>
        </div>


        <el-form size="small" class="search-form">
          <el-form-item label="审方意见">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" style="width: 50%;" v-model="opinion">
            </el-input>
          </el-form-item>
          <el-form-item label="审方结论">
            <el-radio-group v-model="conclusion">
              <el-radio :label="3">审方通过</el-radio>
              <el-radio :label="6">审方不通过，允许申诉</el-radio>
              <el-radio :label="9">禁止下达</el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="sign">
              <el-checkbox label="允许双签"></el-checkbox>
              <el-checkbox label="填写理由并双签"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="处方快捷模版">
            <el-checkbox-group v-model="fastTemplate">
              <el-checkbox label="用法用量不适宜"></el-checkbox>
              <el-checkbox label="适应症不适宜"></el-checkbox>
              <el-checkbox label="疗程需调整"></el-checkbox>
              <el-checkbox label="其他问题"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker";

export default {
  name: "Patient",
  components: { DateRangePicker },
  data() {
    return {
      // 搜索表单
      drugType: "",
      routeType: "",
      drugBaseType: "",
      // 表格数据
      tableData: [
        {
          name: "阿莫西林分散片",
          spec: "1片",
          route: "口服",
          dose: '3片',
          freq: "一天一次",
          doctor: "陆离",
          remark: "",
          startTime: "2025-09-15 15:45:44",
          amount: "3盒",
          conclusion: "通过",
          reason: "病情需要"
        },
        {
          name: "碘克沙醇",
          spec: "10ml",
          route: "静脉注射",
          dose: '10ml',
          freq: "一天三次",
          doctor: "陆离",
          remark: "开3停3",
          startTime: "2025-09-15 15:45:44",
          amount: "3支",
          conclusion: "不通过",
          reason: "病情需要"
        },
      ],
      orderItem: [{
        name: "碘克沙醇",
        spec: "10ml",
        route: "静脉注射",
        dose: '10ml',
        freq: "一天三次",
        doctor: "陆离",
        remark: "开3停3",
        startTime: "2025-09-15 15:45:44",
        amount: "3支",
        conclusion: "不通过",
        reason: "病情需要"
      }],
      opinion:"",
      sign: "",
      conclusion: "",
      fastTemplate: "",
      loading: false,
      prescdialogVisible: false,

    };
  },
  methods: {
    // 单条医嘱审核
    setDrugFlag(row, column, event) {
      this.prescdialogVisible = true;
    },
    handleDialogClose() {
      this.prescdialogVisible = false; 

    },
    handleSubmit() {

      this.$alert("确定提交当前审核结论吗?", '', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    },



  },
  mounted() { }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .search-container {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .search-form {
      .el-form-item {
        margin-bottom: 15px;
        margin-right: 20px;
      }
    }
  }

  .operation-container {
    margin-bottom: 20px;
    text-align: right;
  }

  .operation-text {
    font-size: 14px;
  }

  .pagination-container {
    text-align: right;
    margin-top: 20px;
  }


  .el-table {
    .el-button--text {
      padding: 0;
      margin: 0 5px;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}
</style>
